<template>
  <div>
    <a-card>
      <a-spin :spinning="spinning" size="large">
        <div style="display: flex">
          <div class="edit-title">
            <a-anchor :affix="false" :getContainer="gerGood" @click="anchorClick" :bounds="300">
              <a-anchor-link :href="item.herf" :title="item.title" class="handle-item" v-for="(item, index) in informationlist" :key="index" />
            </a-anchor>
          </div>
          <div style="width: 100%; height: 75vh; margin-left: 7px">
            <div style="height: calc(100% - 40px); overflow-y: auto; margin-top: 16px" id="goods">
              <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
                <div id="components">
                  <h1>通用参数</h1>
                  <a-form-model-item label="评级" prop="level">
                    <a-select v-model="form.level" show-search style="width: 220px">
                      <a-select-option :value="item.value" v-for="item in levelInfo" :key="item.value">
                        {{ item.key }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <!-- <a-form-model-item label="允许生成海报" prop="isCreateBill">
                    <a-radio-group v-model="form.isCreateBill">
                      <a-radio value="1"> 是 </a-radio>
                      <a-radio value="0"> 否 </a-radio>
                    </a-radio-group>
                  </a-form-model-item> -->
                  <a-form-model-item label="效果图">
                    <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :fileSize="10" :number="10" :accept="'image/*'" @fileChange="fileImageChange" v-model="imgList"></JImageUpload>
                    <div class="upload__tip" style="line-height: 16px">图片小于10mb，格式jpg、png，最多10张。建议像素670X720。</div>
                  </a-form-model-item>
                  <a-form-model-item label="效果视频" prop="videoList">
                    <JImageUpload
                      :uploadParams="getUploadParams()"
                      :isMultiple="false"
                      :fileSize="300"
                      :number="1"
                      :accept="'video/*'"
                      @fileChange="fileVideoChange"
                      v-model="videoList"
                    ></JImageUpload>
                    <div class="upload__tip" style="line-height: 16px">视频小于300mb</div>
                  </a-form-model-item>
                  <a-form-model-item label="商品" required>
                    <div>
                      <a-button type="primary" @click="visible = true">添加商品</a-button>
                      <a-button style="margin-left: 8px" :disabled="createImgFlag" @click="handleCreateImg">生成搭配图</a-button>
                    </div>
                    <!--          Jrecord.id+record.colorno-->
                    <a-table
                      style="margin-top: 20px"
                      :rowKey="record => JSON.stringify(record)"
                      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                      :columns="columns"
                      :data-source="productList"
                      :pagination="false"
                    >
                      <span class="product-wrapper" slot="product" slot-scope="item">
                        <img slot="cover" class="img" :src="item.imgurl" :alt="item.value" v-if="item.imgurl" />
                        <img slot="cover" class="img" :alt="item.value" src="https://img.bzhz.jnbygroup.com/cloth.png" v-else />
                        <div class="text">
                          <div class="t">【{{ item.brand }}】{{ item.value }}</div>
                          <div class="t">{{ item.name }}</div>
                          <div class="t">{{ item.colorno }}/{{ item.color_name }}</div>
                        </div>
                      </span>
                      <span slot="action" slot-scope="text, record, index">
                        <a-icon type="delete" @click="handleDeleteProduct(record, index)" />
                      </span>
                    </a-table>
                  </a-form-model-item>
                  <a-form-model-item label="商品标签">
                    <div>
                      <span style="margin-right: 10px">品牌</span>
                      <span v-if="arcList && arcList.length > 0">
                        <a-tag style="margin: 2px" color="#108ee9" v-for="(label, index) in arcList" :key="index">
                          {{ label.value }}
                        </a-tag>
                      </span>
                    </div>
                    <div>
                      <span style="margin-right: 10px">年份</span>
                      <span v-if="yearList && yearList.length > 0">
                        <a-tag style="margin: 2px" color="#108ee9" v-for="(label, index) in yearList" :key="index">
                          {{ label.value }}
                        </a-tag>
                      </span>
                    </div>
                    <div>
                      <span style="margin-right: 10px">波段</span>
                      <span v-if="bandList && bandList.length > 0">
                        <a-tag style="margin: 2px" color="#108ee9" v-for="(label, index) in bandList" :key="index">
                          {{ label.value }}
                        </a-tag>
                      </span>
                    </div>
                    <div>
                      <span style="margin-right: 10px">季节</span>
                      <span v-if="seasonList && seasonList.length > 0">
                        <a-tag style="margin: 2px" color="#108ee9" v-for="(label, index) in seasonList" :key="index">
                          {{ label.value }}
                        </a-tag>
                      </span>
                    </div>
                    <div>
                      <span style="margin-right: 10px">大类</span>
                      <span v-if="bigList && bigList.length > 0">
                        <a-tag style="margin: 2px" color="#108ee9" v-for="(label, index) in bigList" :key="index">
                          {{ label.value }}
                        </a-tag>
                      </span>
                    </div>
                    <div>
                      <span style="margin-right: 10px">小类</span>
                      <span v-if="smallList && smallList.length > 0">
                        <a-tag style="margin: 2px" color="#108ee9" v-for="(label, index) in smallList" :key="index">
                          {{ label.value }}
                        </a-tag>
                      </span>
                    </div>
                  </a-form-model-item>
                  <template v-for="tag in tags">
                    <a-form-model-item style="margin-bottom: 0" :label="tag.title">
                      <template v-for="t in tag.children">
                        <a-checkable-tag :key="t.code" :checked="form.labelList.indexOf(t.code) > -1" @change="checked => handleTagChange(t.code, checked)">
                          {{ t.title }}
                        </a-checkable-tag>
                      </template>
                    </a-form-model-item>
                  </template>
                </div>
                <a-divider dashed />
                <div id="anchor">
                  <h1>个性参数</h1>
                  <a-form-model-item label="应用渠道" required>
                    <a-checkbox default-checked disabled> 企划搭配 </a-checkbox>
                    <div>
                      <h1>企划搭配</h1>
                      <a-form layout="vertical" :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
                        <a-form-item label="标题" class="current" required>
                          <a-input v-model="match.name" placeholder="请填写标题" :maxLength="20" style="width: 320px" />
                        </a-form-item>
                        <a-form-item label="搭配介绍" class="current">
                          <a-textarea v-model="match.matchAbout" style="width: 320px; min-height: 150px" :maxLength="400" />
                        </a-form-item>
                      </a-form>
                    </div>
                  </a-form-model-item>
                </div>
              </a-form-model>
            </div>
          </div>
        </div>
      </a-spin>

      <a-drawer title="商品库" :width="840" :zIndex="4" @close="visible = false" :visible="visible" :destroyOnClose="true">
        <Product :isEmit="true" @add="handleAddProduct" :gender="-1" :allowGetTag="false" :allowGetPrice="false" :forCollocation="true" :isEmpty="false"></Product>
      </a-drawer>
      <konva-img :konvaImgVisible.sync="konvaImgVisible" :createStylingList="createStylingList"></konva-img>
    </a-card>
    <div class="footer-box">
      <a-button @click="handleBack">取消</a-button>
      <a-button style="margin-left: 8px" @click="preservSave" type="primary">仅保存</a-button>
      <a-button style="margin-left: 8px; margin-right: 8px" @click="application" type="primary">保存并上架</a-button>
    </div>
  </div>
</template>
<script>
import { addCondition, queryBatchProductSkcMatted, matchCreate, finishBy, selectGoodsList } from '@api/box/boxLook'
import { queryGoodsList } from '@/api/box/workbench'
import { lookEditMixin } from './util/lookMixin'

export default {
  mixins: [lookEditMixin],
  data() {
    return {
      checkType: false,
      match: {
        name: '',
        matchAbout: ''
      },
      rules: {
        // gender: [{ required: true, message: '请选择', trigger: 'blur' }],
        level: [{ required: true, message: '请选择', trigger: 'blur' }]
        // isCreateBill: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      form: {
        // gender: '',
        level: '99',
        // isCreateBill: '1',
        videoList: [],
        imgList: [],
        labelList: [],
        sceneList: []
      },
      // genderInfo: [
      //   {
      //     key: '1',
      //     value: '男'
      //   },
      //   {
      //     key: '0',
      //     value: '女'
      //   },
      //   {
      //     key: '2',
      //     value: '通用'
      //   },
      //   {
      //     key: '3',
      //     value: '女童'
      //   },
      //   {
      //     key: '4',
      //     value: '男童'
      //   }
      // ],
      perfectId: '',
      box_Perfect: null
    }
  },
  created() {
    this.getCondition()
    this.getSysCateTree()

    if (this.$route.params.id && this.$route.params.id != 'add') {
      this.getDetails()
    }
    this.box_Perfect = localStorage.getItem('box_Perfect')
  },
  watch: {
    box_Perfect(val) {
      if (val) {
        this.productList = JSON.parse(val).productList
        this.arcList = JSON.parse(val).arcList // 品牌
        this.bigList = JSON.parse(val).bigList // 大类
        this.smallList = JSON.parse(val).smallList //小类
        this.seasonList = JSON.parse(val).seasonList // 季节
        this.yearList = JSON.parse(val).yearList // 年份
        this.bandList = JSON.parse(val).bandList // 波段
        this.perfectId = JSON.parse(val).perfectId //完善搭配ID
      }
    }
  },
  methods: {
    getDetails() {
      this.spinning = true
      const data = {
        id: this.$route.params.id
      }

      addCondition(data).then(res => {
        this.spinning = false
        if (res.code === 0) {
          this.handleDetail(res)
          this.checkType = res.data.look.name ? true : false
          let list = res.data.productList.map(item => item.productCode)
          this.getList(list)
        }
      })
    },
    onChange(e) {
      this.checkType = e.target.checked
    },
    // 取消
    handleBack() {
      // console.log(this.box_Perfect)
      if (this.box_Perfect) {
        localStorage.setItem('currentTab', 2)
      }
      this.$router.go(-1)
    },
    preservation(type) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // if (!this.form.imgList.length) {
          //   this.$message.error('至少上传一张效果图！')
          //   return
          // }
          if (!this.productList.length) {
            this.$message.error('请添加商品！')
            return
          }
          // if (this.checkType) {
          if (!this.match.name) {
            this.$message.error('请添写标题！')
            return
          }
          //   if (!this.match.matchAbout) {
          //     this.$message.error('请添写介绍！')
          //     return
          //   }
          // }

          const data = {
            requestData: {
              look: {
                // gender: this.form.gender,
                status: type,
                level: this.form.level,
                // isCreateBill: this.form.isCreateBill,
                productList: this.productList.map(e => {
                  return {
                    productBrand: e.brand,
                    productCode: e.name,
                    productName: e.value,
                    productColorName: e.color_name,
                    productColor: e.colorno,
                    productId: e.id,
                    productImage: e.imgurl
                  }
                }),
                lookDiagram: '',
                videoList: this.form.videoList.map(e => {
                  return {
                    type: 1,
                    url: e.url,
                    videoImg: e.url + '?vframe/jpg/offset/1'
                  }
                }),
                imgList: this.form.imgList.map(e => {
                  return {
                    type: 0,
                    url: e.url
                  }
                }),

                labelList: [...this.form.labelList, ...this.form.sceneList],
                name: this.match.name,
                content: this.match.matchAbout,

                sysLookTypesList: [
                  {
                    type: 'B10-A05',
                    sonType: 'B10-A05-A01'
                  }
                ]
              },
              match: {
                isYd: 0,
                labelList: [],
                status: type,
                // gender: this.form.gender,
                level: this.form.level,
                // isCreateBill: this.form.isCreateBill,
                productList: this.productList.map(e => {
                  return {
                    productBrand: e.brand,
                    productCode: e.name,
                    productName: e.value,
                    productColorName: e.color_name,
                    productColor: e.colorno,
                    productId: e.id,
                    productImage: e.imgurl
                  }
                }),
                lookDiagram: '',
                videoList: this.form.videoList.map(e => {
                  return {
                    type: 1,
                    url: e.url,
                    videoImg: e.url + '?vframe/jpg/offset/1'
                  }
                }),
                imgList: this.form.imgList.map(e => {
                  return {
                    type: 0,
                    url: e.url
                  }
                }),
                name: this.match.name,
                matchAbout: this.match.matchAbout,

                sysLookTypesList: [
                  {
                    type: 'B10-A05',
                    sonType: 'B10-A05-A01'
                  }
                ]
              }
            }
          }
          if (this.lookId) {
            data.requestData.look.id = this.lookId
          }
          if (this.$route.params.id && this.$route.params.id != 'add') {
            data.requestData.match.id = this.$route.params.id
          }
          console.log(data, 'data')
          // return
          matchCreate(data)
            .then(res => {
              this.spinning = false
              if (res.code === 0) {
                this.$message.success('保存成功！')
                if (this.box_Perfect) {
                  this.finishInfo()
                }
                localStorage.removeItem('box_Perfect')
                this.$router.push(`/box/boxLook/list`)
              } else {
                this.$message.error(res.msg)
              }
            })
            .catch(err => {
              this.spinning = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //
    finishInfo() {
      let data = {
        requestData: {
          id: this.perfectId
        }
      }
      finishBy(data).then(res => {
        if (res.code == 0) {
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  },
  destroyed() {
    // 离开页面生命周期函数
    localStorage.removeItem('box_Perfect') //清除缓存
  }
}
</script>
<style lang="less" scoped src="./style/look.less"></style>

